<template>
  <section class="mg-p">
    <h2>JavaScript 设计模式</h2>
    <p>🌏 请按F12打开控制台进行查看结果</p>
    <main>
      <section class="design-btns">
        <div class="col">
          <div
              v-for="(item,index) in modeList"
              :key="index"
              class="container-2"
          >
            <div class="btn"
                 :key="index+1"
                 @click="selectMode(index)"
                 :class="sClass">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </section>
      <component :is="componentMode.mode" :key="new Date().getTime()"/>
    </main>
  </section>
</template>

<script>
import DesignSingleton from "./components/DesignSingleton";
import DesignPrototype from "./components/DesignPrototype";
import DesignFactory from "./components/DesignFactory";
import DesignAdaptor from "./components/DesignAdaptor";
import DesignDecorator from "./components/DesignDecorator";
import DesignProxy from "./components/DesignProxy";
import DesignObserver from "./components/DesignObserver";
import DesignState from "./components/DesignState";
import DesignIterator from "./components/DesignIterator";
import DesignCombination from "./components/DesignCombination";
import DesignBridge from "./components/DesignBridge";
import DesignStrategy from "./components/DesignStrategy";
import DesignEnjoy from "./components/DesignEnjoy";
import DesignTemplate from "./components/DesignTemplate";
import DesignResponsibility from "./components/DesignResponsibility";
import DesignCommand from "./components/DesignCommand";
import DesignMemo from "./components/DesignMemo";
import DesignMediator from "./components/DesignMediator";
import DesignExplain from "./components/DesignExplain";
import DesignVisitor from "./components/DesignVisitor";

export default {
  name: "index",
  components: {
    DesignPrototype,
    DesignSingleton,
    DesignAdaptor,
    DesignFactory,
    DesignDecorator,
    DesignProxy,
    DesignObserver,
    DesignState,
    DesignIterator,
    DesignCombination,
    DesignBridge,
    DesignStrategy,
    DesignEnjoy,
    DesignTemplate,
    DesignResponsibility,
    DesignCommand,
    DesignMemo,
    DesignMediator,
    DesignExplain,
    DesignVisitor,
  },
  data() {
    return {
      pClass: `container-${Math.ceil(Math.random() * 6)}`,
      sClass: `btn-${Math.ceil(Math.random() * 6)}`,
      componentMode: {
        name: '单例模式',
        mode: 'DesignSingleton',
      },
      modeList: [
        {
          name: '单例模式',
          mode: 'DesignSingleton',
        },
        {
          name: '原型模式',
          mode: 'DesignPrototype',
        },
        {
          name: '工厂模式',
          mode: 'DesignFactory',
        },
        {
          name: '适配器模式',
          mode: 'DesignAdaptor',
        },
        {
          name: '装饰者模式',
          mode: 'DesignDecorator',
        },
        {
          name: '代理模式',
          mode: 'DesignProxy',
        },
        {
          name: '观察者模式',
          mode: 'DesignObserver',
        },
        {
          name: '状态模式',
          mode: 'DesignState',
        },
        {
          name: '迭代器模式',
          mode: 'DesignIterator',
        },
        {
          name: '组合模式',
          mode: 'DesignCombination',
        },
        {
          name: '桥接模式',
          mode: 'DesignBridge',
        },
        {
          name: '👼策略者模式',
          mode: 'DesignStrategy',
        },
        {
          name: '💪享元模式',
          mode: 'DesignEnjoy',
        },
        {
          name: '模板方法模式',
          mode: 'DesignTemplate',
        },
        {
          name: '职责链模式',
          mode: 'DesignResponsibility',
        },
        {
          name: '命令模式',
          mode: 'DesignCommand',
        },
        {
          name: '备忘录模式',
          mode: 'DesignMemo',
        },
        {
          name: '中介者模式',
          mode: 'DesignMediator',
        },
        {
          name: '解释器模式',
          mode: 'DesignExplain',
        },
        {
          name: '访问者模式',
          mode: 'DesignVisitor',
        },
      ]
    }
  },
  mounted() {

  },
  methods: {
    selectMode(idx) {
      this.componentMode = this.modeList[idx]
    }
  }
}
</script>

<style lang="scss" scoped>
.design-btns {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: 'Open Sans Condensed', sans-serif;
}

.col {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

div[class*=container] {
  text-align: center;
  width: calc(25% - 16px);
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 325px;
  cursor: pointer;
  border-radius: 5px;
  margin: 5px;
}

.container-1 {
  background: #333;
}

.container-2 {
  background: $color-primary;
}

.container-3 {
  background: #8499B1;
}

.container-4 {
  background: #9888A5;
}

.container-5 {
  background: #7B6D8D;
}

.container-6 {
  background: #565554;
}

/*
 BUTTON STYLING
*/
.btn {
  position: relative;
  color: white;
  width: 256px;
  height: 64px;
  line-height: 64px;
  transition: all 0.3s;
  font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "微軟正黑體", "Microsoft JhengHei", "SimHei", "Microsoft YaHei", "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "標楷體", "DFKai-SB";
}

.btn span {
  transition: all 0.3s;
  transform: scale(1, 1);
}

.btn::before, .btn::after {
  content: '';
  position: absolute;
  transition: all 0.3s;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.btn-1::before {
  left: 4px;
  z-index: 1;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 1);
}

.btn-1:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-1::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-1:hover::after {
  transform: scale(1, 0.1);
  opacity: 0;
}

/* BTN TWO */
.btn-2::before, .btn-2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-2:hover::after {
  animation-name: rotatecw;
  animation-duration: 2s;
}

.btn-2:hover::before {
  animation-name: rotateccw;
  animation-duration: 3s;
}

.btn-2:hover::after, .btn-2:hover::before {
  left: 96px;
  width: 64px;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotatecw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateccw {

  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* BTN THREE */
.btn-3::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1, 0.1);
}

.btn-3:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-3::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-3:hover::after {
  transform: scale(1, 0.1);
  opacity: 0;
}

/* BTN FOUR */
.btn-4:hover span {
  transform: scale(1.2, 1.2);
}

.btn-4::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 0.1);
}

.btn-4:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-4::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-4:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}

/* BTN FIVE */
.btn-5::before {
  transition: transform 0.15s, 0.15s border-radius 0.15s;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 0.1);
  border-radius: 50%;
}

.btn-5:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  border-radius: 0;
}

.btn-5::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-5:hover::after {
  opacity: 0;
}

/* BTN SIX */
.btn-6::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.3, 1.3);
}

.btn-6:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-6::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-6:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}
</style>
